
<template>
  <div class="bgy-changepwd">
    <section class="tavle-content">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>修改当前账号密码信息</span>
        </div>
        <div class="card-content">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" v-enterToNext>
            <el-form-item label="当前账号" >
              <div>{{userInfo.account}}</div>
            </el-form-item>
            <el-form-item label="旧密码" prop="oldPass">
              <el-input type="password" v-model="ruleForm.oldPass" placeholder="请输入当前登录密码"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPass">
              <el-input type="password" v-model="ruleForm.newPass" placeholder="请输入新密码"></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="newPass2">
              <el-input type="password" v-model="ruleForm.newPass2" placeholder="再次输入新密码" @keyup.enter.native="submitForm('ruleForm')"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="submitForm('ruleForm')">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </section>
  </div>
</template>

<script>
import { setStore,getStore,removeStore } from '@/utils/util';
import { getUserSession, updateUserPwd } from '@/axios/user/user';
import { mapState,mapMutations } from 'vuex';
import md5 from 'js-md5';

let Base64 = require('js-base64').Base64;

export default {
  name: 'changepwd',
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.newPass2 !== '') {
          this.$refs.ruleForm.validateField('newPass2');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.newPass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return {
        ruleForm:{
            oldPass: '',
            newPass: '',
            newPass2: ''
        },
        rules: {
          oldPass: [
            { required: true, message: '请输入旧密码', trigger: 'blur' },
          ],
          newPass: [
            { required: true, validator: validatePass, trigger: 'blur' }
          ],
          newPass2: [
            { required: true, validator: validatePass2, trigger: 'blur' }
          ],
        },
        userInfo: {
          account: ''
        },
        accountFlag:false
    }
  },
  components: {

  },
  created(){
    getUserSession().then(res => {
      if (res.code == 0) {
        this.userInfo = res.data
      }
    })
  },
  methods:{
    ...mapMutations([]),
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateUserPwd(this.ruleForm).then(res => {
            if (res.code === 0) {
              this.$message({message: '修改成功',type: 'success'});
              this.ruleForm = {
                oldPass: '',
                newPass: '',
                newPass2: ''
              }
            }
          })
        }
      });
    },
  }
};
</script>

<style lang="scss">
@import '../../../style/mixin.scss';
</style>